<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="default.css" type="text/css" />	
	<link rel="stylesheet" href="home.css" type="text/css" />	
	<script type="text/javascript" language="javascript" src="jquery.js"></script>		
	<script type="text/javascript" language="javascript" src="jfunction.js"></script>	
	
	<title>Welcome Letter</title>
</head>
<body>
<center>
	<div id="wrap">
		
		
		<!-- body -->
		<div id="body">
			<div id="banner_image">
				
				<img id="img1" src="img/pic1.jpg" />
				<img id="img2" src="img/pic2.jpg" />
				<img id="img3" src="img/pic3.jpg" />
				<div id="image_frame">
					<div id="btn_left"></div>
					<div id="btn_right"></div>
				</div>				
				<div style="clear:both"></div>
				
			</div>	
			<div id="image_frames">	
				<div id="image_frames_images">
					<img src="img/img294x90.jpg" title="image" alt="image"/>
					<img src="img/img294x90.jpg" title="image" alt="image"/>
					<img src="img/img294x90.jpg" title="image" alt="image"/>
				</div>			
				<div id="content">
					<a href=#>
					<div id="frame1">
						<div id="frame_content">
							<font style="font-size:18px;margin-bottom:5px">Mùa đông ấm áp ở Vinh Sơn</font><br /><br />
							Khi đường phố ngập tràn không khí Giáng Sinh. Thì tôi, một trong những thành viên của câu lạc bộ thiện nguyện SCY...
						</div>
					</div>
					</a>
					<a href=#>
					<div id="frame2">
						<div id="frame_content">
							<font style="font-size:18px;margin-bottom:5px">Mùa đông ấm áp ở Vinh Sơn</font><br /><br />
							Khi đường phố ngập tràn không khí Giáng Sinh. Thì tôi, một trong những thành viên của câu lạc bộ thiện nguyện SCY...
						</div>
					</div>
					</a>
					<a href=#>
					<div id="frame3">
						<div id="frame_content">
							<font style="font-size:18px;margin-bottom:5px">Mùa đông ấm áp ở Vinh Sơn</font><br /><br />
							Khi đường phố ngập tràn không khí Giáng Sinh. Thì tôi, một trong những thành viên của câu lạc bộ thiện nguyện SCY...
						</div>
					</div>
					</a>
				</div>
				
				<div style="clear:both"></div>
			</div>
			
			<!-- footer -->
			<div id="footer">
				© 2012 Southern CY
			</div>
			<div style="clear:both"></div>
		</div>
		
		<!-- header -->
		<div id="header">
			<a href="scyclub.com"><img id="logo" src="img/scylogo.png" title="scyclub.com" alt="scyclub"></a>
			<div id="mainmenu">
				<ul>
					<li><a href=#>Trang chủ</a></li>
					<li id="selected"><a href=#>Tin dự án</a></li>
					<li><a href=#>Hình ảnh</a></li>
					<li><a href=#>Cửa hàng</a></li>
					<li><a href=#>Giới thiệu</a></li>
				</ul>
			</div>
			<div id="language">
				<select>
					<option>Tiếng việt</option>
				</select>
			</div>
			<div id="share">
				
				<img id="mimo" src="img/mimo.png" />
				<img id="fb" src="img/fb.png" />
				<img id="tw" src="img/tw.png" />
				
			</div>
			<div style="clear:both"></div>
		</div>
		
		

	</div>
</center>
<script type="text/javascript">
var i=1;//next img
var j=0;// current img
var max=3;
var bannerImageWidth=970;
var bannerImageHeight=492;
var timetofade=1000;
var timetochangeimage=6000;


window.onload=init;
function init(){
	for(var index=1;index<=max;index++)
		$("#img"+index).myResize(bannerImageWidth,bannerImageHeight);
	slideImage();
   setInterval(slideImage,timetochangeimage);
   //btn
	$("#btn_left").click(function() {
	  moveImage(1);
	});
	$("#btn_right").click(function() {
	  moveImage(0);
	});
   
}
	function slideImage(){
		moveImage(0);
	}
	function moveImage(back){	
		//disable button
		$("#btn_right").css("display","none");
		$("#btn_left").css("display","none");
		if(back){
			i=j;
			if(i==1) i=max;
			else i--;
			$('#img'+j).fadeOut(timetofade);
			$('#img'+i).fadeIn(timetofade,function(){getNextImage();});			
		}
		else{
			$('#img'+j).fadeOut(timetofade);
			$('#img'+i).fadeIn(timetofade,function(){getNextImage();});			
		}
   }
   function getNextImage(){
	j=i;
	if(i==max)i=1;
	else i++;
	//enable button
	$("#btn_right").css("display","block");
	$("#btn_left").css("display","block");
   }   
   
   



</script>
</body>
</html>